<template>
  <base-page-view class-name="page-container material-download">
    <view class="pic-water-fall">
      <waterFall ref="waterFall" :list="imgList" min :delay="0">
        <template v-slot="{ item, columnIndex, index }">
          <view class="pic-item" :class="{mini: columnIndex === 1 && index===0 }" :style="'height:'+item.imgContainerHeight+'rpx'" @click="selectClick(columnIndex, index)">
            <b-image v-if="item.resourceType===1" class="pic" :x-width="375" :src="item.resourceUrl" :style="'height:'+item.imgHeight+'rpx'" mode="aspectFill" />
          </view>
          <view class="icon" @click="selectClick(columnIndex, index)">
            <image v-if="item.selected" src="/static/images/icon/icon_radio_active.png" mode="apsectFit" />
            <image v-else src="/static/images/icon/icon_radio_white.png" mode="apsectFit" />
          </view>
        </template>
      </waterFall>
    </view>
    <footer-bar>
      <view class="footer-line">
        <view class="item">
          已选择<text>{{ selectedList.length }}</text>/{{ total }}张图片
        </view>
        <view class="item btn" @click="toDownload">立即下载</view>
      </view>
    </footer-bar>
  </base-page-view>
</template>
<script>
import waterFall from '@/components/waterFall/index'
import footerBar from '@/components/footerBar'
import { debounce } from '@/utils/tools'
import './download.scss'
export default {
  name: 'MaterialDownload',
  components: {
    waterFall,
    footerBar
  },
  data() {
    return {
      id: '', // 素材ID
      show_type: '', // 素材模版类型 1: 商品模版、2:简版
      type: '', // GOODS_INFO：商品简介、POSTER_VIDEO：海报、PRODUCT_TEST：产品实验、REPORT：质检报告
      imgList: [],
      selectedList: [],
      total: '' // 最多total可选
    }
  },
  computed: {},
  onLoad(options) {
    this.id = options.id || ''
    this.show_type = Number(options.show_type || '1')
    this.type = options.type || ''
    if (this.id) {
      this.fetchData()
    }
  },
  onPullDownRefresh() {
  },
  onReachBottom: debounce(function() {
  }, 500),
  methods: {
    // 获取产品素材所有分类
    async fetchData() {
      const res = await this.$api.materialApi.getMaterialDetail({ id: this.id })
      if (res.success && res.data) {
        const { resource } = res.data
        if (resource) {
          const { goodsDescImgs, posterImgs, productTests, reports } = resource

          const imgWidth = (750 - 60) / 2
          switch (this.type) {
            case 'GOODS_INFO':
              this.imgList = (goodsDescImgs || []).map((i, index) => {
                let needD = 0
                if (index === 1) {
                  if ((goodsDescImgs[0].width / goodsDescImgs[0].height) === goodsDescImgs[1].width / goodsDescImgs[1].height) {
                    needD = 60
                  }
                }
                return {
                  ...i,
                  selected: false,
                  imgContainerHeight: Math.floor(imgWidth * i.height / i.width) - needD,
                  imgHeight: Math.floor(imgWidth * i.height / i.width)
                }
              })
              break
            case 'POSTER_VIDEO':
              this.imgList = (posterImgs || []).map((i, index) => {
                let needD = 0
                if (index === 1) {
                  if ((posterImgs[0].width / posterImgs[0].height) === posterImgs[1].width / posterImgs[1].height) {
                    needD = 60
                  }
                }
                return {
                  ...i,
                  selected: false,
                  imgContainerHeight: Math.floor(imgWidth * i.height / i.width) - needD,
                  imgHeight: Math.floor(imgWidth * i.height / i.width)
                }
              })
              break
            case 'PRODUCT_TEST':
              this.imgList = (productTests || []).map((i, index) => {
                let needD = 0
                if (index === 1) {
                  if ((productTests[0].width / productTests[0].height) === productTests[1].width / productTests[1].height) {
                    needD = 60
                  }
                }
                return {
                  ...i,
                  selected: false,
                  imgContainerHeight: Math.floor(imgWidth * i.height / i.width) - needD,
                  imgHeight: Math.floor(imgWidth * i.height / i.width)
                }
              })
              break
            case 'REPORT':
              this.imgList = (reports || []).map((i, index) => {
                let needD = 0
                if (index === 1) {
                  if ((reports[0].width / reports[0].height) === reports[1].width / reports[1].height) {
                    needD = 60
                  }
                }
                return {
                  ...i,
                  selected: false,
                  imgContainerHeight: Math.floor(imgWidth * i.height / i.width) - needD,
                  imgHeight: Math.floor(imgWidth * i.height / i.width)
                }
              })
              break

            default:
              break
          }
          this.total = this.imgList.length > 8 ? 9 : this.imgList.length
          this.$refs.waterFall.init()
        }
      }
    },
    // 点击勾选框
    selectClick(columnIndex, index) {
      const imgItem = { ...this.$refs.waterFall.waterList[columnIndex].list[index] }
      if (imgItem.selected) {
        imgItem.selected = false
      } else if (this.selectedList.length === 9) {
        uni.showToast({ title: '最多选择9张图片', icon: 'none' })
      } else {
        imgItem.selected = true
      }

      this.imgList[imgItem.realIndex] = { ...imgItem }
      this.$set(this.$refs.waterFall.waterList[columnIndex].list, index, { ...imgItem })

      this.selectedList = this.imgList.filter(i => i.selected)
    },
    // 数据统计
    async dataCount(data = {}) {
      // 数据统计："countType": "操作类型：1 ~ 分享统计，2 ~ 下载统计，3 ~ 浏览统计，4 ~ 复制统计,5 ~ 点赞统计",
      const res = await this.$api.materialApi.materialCount({ ...data })
      if (res.success) {
        // 成功
      }
    },
    // 点击立即下载
    toDownload() {
      if (this.selectedList.length) {
        this.dataCount({ count_type: 2, id: this.id, user_id: this.userInfo.uid })
        this.$downloadFile(this.selectedList, {
          fileKey: 'resourceUrl',
          fileType: 'Image',
          callback: (successNum, failNum) => {
            if (successNum > 0) {
              uni.showToast({ title: '已保存到本地相册', icon: 'none' })
              setTimeout(() => {
                uni.navigateBack()
              }, 2000)
            }
          }
        })
      } else {
        uni.showToast({ title: '请至少选择一张图片', icon: 'none' })
      }
    }
  }
}
</script>
